<template>
  <div class="app-tab">
    <app-tab-bar
      :tabs="tabs"
      :active="active"
      @tab-click-handler="tabClickHandler"
    ></app-tab-bar>
    <slot></slot>
  </div>
</template>
<script>
import AppTabBar from '@/components/common/tabs/AppTabBar'
export default {
  data () {
    return { tabs: [], currentActive: '' }
  },
  props: { active: { type: String } },
  mounted () {
    this.initPane()
  },
  watch: {
    '$i18n.locale' () {
      const VueObj = this
      setTimeout(() => {
        VueObj.initPane()
      }, 10)
    }
  },
  components: { AppTabBar },
  methods: {
    initPane () {
      const VueObj = this
      VueObj.tabs = []
      this.$children.forEach(item => {
        if (item.$options._componentTag === 'app-tab-pane') {
          const isShow = VueObj.currentActive === '' ? VueObj.active === item.name : VueObj.currentActive === item.name
          isShow ? item.show() : item.hidden()
          VueObj.tabs.push({ label: item.label, name: item.name, iconClass: item.iconClass })
        }
      })
    },
    tabClickHandler (name) {
      this.currentActive = name
      this.$children.forEach((item, index) => {
        if (item.$options._componentTag === 'app-tab-pane') {
          item.name === name ? item.show() : item.hidden()
        }
      })
    }
  }
}
</script>
